<!--新增交往记录页  ————————  客户经理可查看-->
<template>
  <div id="CreateCustomerCommunicationRecord">
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">客户管理</strong></a>
          <span>/</span>
        </li>
        <li><strong>客户信息管理</strong><span>/</span></li>
        <li><strong>新增交往记录</strong></li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account block block-account" style="padding-left: 20px;">

        <div class="page-title" style="border-bottom: #F1F3F6 1px solid;">
          <h2>新增交往记录</h2>
          <hr>
        </div>
        <div style="margin-bottom: 30px">
          <el-descriptions direction="vertical" :column="2" border>
            <el-descriptions-item label="客户编号">{{ customerId }}</el-descriptions-item>
            <el-descriptions-item label="客户名字">{{customerName}}</el-descriptions-item>
          </el-descriptions>
        </div>
        <form action="">
          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">时间</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-on:blur="checkRecordDate" type="date" v-model="record.recordDate" class="form-control" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">地点</strong>
            <span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px">
              <input v-on:blur="checkRecordPlace" type="text" v-model="record.recordPlace" placeholder="请输入交往的地点" class="form-control" style="width: 400px;">
            </div>

          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">概要</strong>
            <span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-on:blur="checkRecordOutline" v-model="record.recordOutline" class="form-control" placeholder="请输入交往的概要" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">备注</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-on:blur="checkRecordRemarks" v-model="record.recordRemarks" class="form-control" placeholder="请输入交往的备注" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">详细信息</strong>
            <div style="padding-left: 20px;">
              <textarea v-model="record.recordDetails" class="form-control" placeholder="请输入交往的详细信息" style="width: 400px;"></textarea>
            </div>
          </div>

          <div class="text-center" style="margin-top: 40px;padding-bottom: 30px">
            <button v-on:click="createRecord" class="btn btn-primary">保存</button>
            <button v-on:click="toCustomerCommunicationRecordList" class="btn btn-default">返回</button>
          </div>
        </form>

      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: "CreateCustomerCommunicationRecord",
  data(){
    return{
      customerId:'',
      customerName:'',
      record:{
        customerId:'',
        recordDate:'',
        recordPlace:'',
        recordOutline:'',
        recordRemarks:'',
        recordDetails:''
      }
    }
  },
  methods:{
    createRecord(){
      if (this.checkRecordDate()){
        if (this.checkRecordPlace()){
          if (this.checkRecordOutline()){
            if (this.checkRecordRemarks()){
              this.$axios.post('/record/createRecord',this.record).then(
                res=>{
                  this.$message({
                    showClose: true,
                    message: res.data.message,
                    type: 'success'
                  });
                  this.$router.push({path:'/MemuBar/CustomerCommunicationRecordList',query:{
                      customerId:this.customerId,
                      customerName:this.customerName
                    }})
                  }
              )
            }
          }
        }
      }
    },
    loadCustomer(){
      this.customerId=this.$route.query.customerId,
      this.customerName=this.$route.query.customerName,
      this.record.customerId=this.$route.query.customerId
    },
    toCustomerCommunicationRecordList(){
      this.$router.push({path:'/MemuBar/CustomerCommunicationRecordList',query:{
          customerId:this.customerId,
          customerName:this.customerName
      }})
    },
    checkRecordDate(){
      if (this.record.recordDate==''){
        this.$message({
          showClose: true,
          message: '请选择交往时间',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkRecordPlace(){
      if (this.record.recordPlace==''){
        this.$message({
          showClose: true,
          message: '请选择交往地点',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkRecordRemarks(){
      if (this.record.recordRemarks==''){
        this.$message({
          showClose: true,
          message: '请选择交往备注',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
    checkRecordOutline(){
      if (this.record.recordOutline==''){
        this.$message({
          showClose: true,
          message: '请选择交往概要',
          type: 'error'
        });
        return false;
      }else {
        return true;
      }
    },
  },
  created() {
    this.loadCustomer()
  }
}
</script>

<style scoped>

</style>
